<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            /* width: 200px;
            height: 200px; */
            margin: auto;
            /* margin-top: 200px; */

        }


        a {
            text-decoration: none;
        }
    

   .active{
            color: green;
            /* font-size: 20px; */
        }
        
    </style>
</head>

<body>
    <div class="box">
        <a href="/video"  >视频</a> &nbsp;&nbsp;
        <a href="/liveBroadcast">直播</a>
    </div>
    <div class="content">

    </div>

    <script>
        var als = document.querySelectorAll('a')
        als.forEach((item) => {
            console.log(item);
            item.onclick = function (e) {
                e.preventDefault();

                history.pushState({ title: '', url: '' }, '', this.href)
                switch (location.pathname) {
                    case '/video': video_page(); break
                    case '/liveBroadcast': liveBroadcast_page(); break
                
                  
        }
                console.log(als);
           
               

                //循环遍历一遍als，先把高亮全部取消
            for (var j=0;j<als.length;j++){
                        als[j].classList.remove('active')
                    }
                    //点击那个给那个加高亮
                    this.classList.add('active')
                    console.log('active');

                
            }

        })
      
       



        function video_page() {
            let res = `
              <ul>
                <li><a href="">Twitter 的新任CEO马斯克表示,他计划将 Twitter 变成一个用户可以购买东西并提供货币市场账号的平台。</a></li>
                <li><a href="">明年《使命召唤》会有大型更新内容：是一款完整的付费作品</a></li>
                <li><a href="">江歌遗体局部照片疑遭泄露，江秋莲：已报警</a></li>
                <li><a href="">NBA综合:雄鹿双加时险胜雷霆 篮网大胜尼克斯</a></li>
                <li><a href="">埃隆·马斯克在不到24小时内就关闭了Twitter</a></li>
                <li><a href="">iPhone15五大改变曝光！现款机主恐成大怨种</a></li>
                <li><a href="">前三位绝了！福布斯发布2022中国内地富豪榜</a></li>
             </ul>
              `


            document.querySelector('.content').innerHTML = res
        }
        function liveBroadcast_page() {
            let res = `
                <ul>
                <li><a href="">小杨哥带货直播</a></li>
                <li><a href="">林俊杰直播pk</a></li>
                <li><a href="">周杰伦突然直播发售新专辑，结果确实</a></li>
                <li><a href="">流浪吧地球4直播首秀</a></li>
                <li><a href="">赵某因涉嫌嫖娼被公安机关抓捕，目前正在现场直播</a></li>
                <li><a href="">陈某因盗窃被公安机关逮捕，目前正在进一步调查</a></li>
                <li><a href="">母某因传播色情网站被公安机关逮捕，罪犯正在审讯</a></li>
             </ul>
                `
            document.querySelector('.content').innerHTML = res
        }






    </script>

</body>

</html>